<template>
    <el-container class="mine-container">
        <el-aside width="40px">Aside</el-aside>
        <el-aside width="200px">
            <animation-menu @change="(val) => animationMenu = val" :active="animationMenu"/>
        </el-aside>
        <el-container>
            <el-header class="mine-header bottom-line">Header</el-header>
            <el-main>
                <animation-template v-if="animationMenu === 'template'"/>
                <animation-material v-if="animationMenu === 'media'"/>
            </el-main>
        </el-container>
    </el-container>
</template>

<script>
import AnimationMenu from './Animation/Menu.vue';
import AnimationTemplate from './Animation/Templates.vue';
import AnimationMaterial from './Animation/Material/index.vue';
export default {
    components: {
        AnimationMenu,
        AnimationTemplate,
        AnimationMaterial,
    },
    data() {
        return {
            animationMenu: 'template',
        };
    },
}
</script>

<style lang="less" scoped>
.mine-container {
    width: 100%;
    height: 100%;
    .mine-header {
        display: flex;
        align-items: center;
    }
}
</style>